<style>
.groupWrapper
{
    width: {{stage_width}}%;
    float: left;
    margin-right: 1%;
    min-height: 400px;
    padding-bottom: 30px;
}  
</style>
<script type="text/javascript">
$(document).ready(
	function () {
		$('a.closeEl').bind('click', toggleContent);

		$('div.groupWrapper').Sortable(
			{
				accept: 'groupItem',
				helperclass: 'sortHelper',
				activeclass : 	'sortableactive',
				hoverclass : 	'sortablehover',
				handle: 'div.itemHeader',
				tolerance: 'pointer',
				onChange : function(ser)
				{
				},
				onStart : function()
				{

					$.iAutoscroller.start(this, document.getElementsByTagName('body'));
				},
				onStop : function()
				{

					$.iAutoscroller.stop();
                                        var card_id = this.id;
                                        var stage_id = this.parentNode.id;
                                        var move_card=$.post("/cardwall/move_card/" + card_id + "-" + stage_id, {})
				}
			}
		);
	}
);
var toggleContent = function(e)
{

	var targetContent = $('div.itemContent', this.parentNode.parentNode);
	if (targetContent.css('display') == 'none') {
		targetContent.slideDown(300);
		$(this).html('[-]');
	} else {
		targetContent.slideUp(300);
		$(this).html('[+]');
	}

        var toogle_card=$.post("/cardwall/toogle_card/" + this.id, {})
	return false;
};
function serialize(s)
{
	serial = $.SortSerialize(s);
	alert(serial.hash);
};
</script>


{% for each_item in wall_contents %}
<div id="{{each_item.0.id}}" class="groupWrapper">
  <p class="stagelabel">{{each_item.0.title}}</p>
  {% for each_card in each_item.1 %}
  <div id="{{each_card.id}}" class="groupItem">
      {% if each_card.is_open %}
        <div class="itemHeader">{{each_card.title}}<a id={{each_card.id}} href="#" class="closeEl">[-]</a></div>
        <div class="itemContent">
      {% else %}
        <div class="itemHeader">{{each_card.title}}<a id={{each_card.id}} href="#" class="closeEl">[+]</a></div>
        <div class="itemContent" style="display:none">
      {% endif %}
      <a href="/cardwall/edit_card/{{each_card.id}}">Edit</a>
      <ul>
	<li>Start date: {{each_card.start_date}}</li>
	<li>End date: {{each_card.end_date}}</li>
	<li>Developers: {{each_card.developers}}</li>
	<li>Points: 5</li>
	<li>Description: {{each_card.description}}</li>
      </ul>
    </div>
  </div>
  {% endfor %}
</div>
{% endfor %}
